<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>优视雅</title>
		<meta content="优视雅" name="author">
		<meta content="优视雅" name="Copyright">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<meta content="优视雅" name="description">
		<meta content="优视雅" name="keywords">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/public.css">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="css/responsive.css">
		<link rel="shortcut icon" href="images/favorite.ico">
		<script src="js/jquery-1.9.1.min.js"></script>
		<script src="js/public.js"></script>
		<script src="layer/layer.js"></script>
	</head>

	<body>
		<div class="header">
			<div class="top-nav">
				<div class="j-top-nav main">
					<div class="r">
						<a href="login.html">登录</a> /
						<a href="register.html">注册</a> /
						<a href="order.html">我的订单</a> /
					</div>
				</div>
			</div>
			<div class="nav">
				<ul class="main">
					<li>
						<a href="index.html">首页</a>
					</li>
					<li>
						<a href="proList.html">女装</a>
					</li>
					<li>
						<a href="proList.html">男装</a>
					</li>
					<li>
						<a href="proList.html">童装</a>
					</li>
				</ul>
			</div>
		</div>

		<div class="pro_detail main">
			<div class="span6">
				<!--产品放大镜-->
				<div class="box">
					<div class="tb-booth tb-pic tb-s310">
						<a href="images/pro01.jpg"><img src="images/pro01.jpg" alt="美女" rel="images/pro01.jpg" class="jqzoom" /></a>
					</div>

					<ul class="tb-thumb" id="thumblist">
						<li class="tb-selected">
							<div class="tb-pic tb-s40">
								<a href="#"><img src="images/pro01.jpg" mid="images/pro01.jpg" big="images/pro01.jpg"></a>
							</div>
						</li>
						<li>
							<div class="tb-pic tb-s40">
								<a href="#"><img src="images/pro01.jpg" mid="images/pro01.jpg" big="images/pro01.jpg"></a>
							</div>
						</li>
						<li>
							<div class="tb-pic tb-s40">
								<a href="#"><img src="images/banner.jpg" mid="images/banner.jpg" big="images/banner.jpg"></a>
							</div>
						</li>
						<li>
							<div class="tb-pic tb-s40">
								<a href="#"><img src="images/pro01.jpg" mid="images/pro_3.jpg" big="images/pro_3.jpg"></a>
							</div>
						</li>
						<li>
							<div class="tb-pic tb-s40">
								<a href="#"><img src="images/pro01.jpg" mid="images/pro01.jpg" big="images/pro01.jpg"></a>
							</div>
						</li>
					</ul>
				</div>
				<script src="js/jquery.imagezoom.min.js"></script>
				<script type="text/javascript">
					$(document).ready(function() {

						$(".jqzoom").imagezoom();

						$("#thumblist li a").click(function() {
							$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
							$(".jqzoom").attr('src', $(this).find("img").attr("src"));
							$(".jqzoom").attr('rel', $(this).find("img").attr("src"));
						});

					});
				</script>
			</div>

			<div class="span6 instro">
				<p class="name">西湖龙井</p>
				<div class="price">
					<p class="pr">价格：<span>126</span></p>
					<!--<p class="hui"><input type="checkbox"> 使用我的元宝 <span>12</span></p>-->
					<p class="ser">服务 <span>.不支持无理由退货</span> <span>.满88元包邮</span>
						<span>.部分地区无法配送</span>
					</p>
				</div>
				<p class="choice size">尺寸：
					<a class="active">L</a>
					<a>M</a>
					<a>S</a>
				</p>
				<p class="choice color">颜色：
					<a class="active">红色</a>
					<a>黑色</a>
					<a>黄色</a>
				</p>
				<p class="num-p">数量：
					<a javascritp:; class="jian">-</a><input class="num" value="1"><a href="javascript:;" class="jia">+</a>
				</p>
				<p class="btn">
					<a href="pay.html" class="to_buy">立即购买</a>
					<a href="javascript:;" class="to_cart">加入购物车</a>
					<a href="javascript:;" class="to_shouchang">收藏</a>
				</p>
			</div>
			<script>
				//选择尺寸
				$(".pro_detail .instro .size a").click(function() {
					var index = $(".pro_detail .instro .size a").index($(this))
					$(".pro_detail .instro .size a").removeClass("active").eq(index).addClass("active");
				})
				//选择颜色
				$(".pro_detail .instro .color a").click(function() {
					var index = $(".pro_detail .instro .color a").index($(this))
					$(".pro_detail .instro .color a").removeClass("active").eq(index).addClass("active");
				})

				//加减
				$(".jia").click(function() {
					$(".num").val(parseInt($(".num").val()) + 1);
				})
				$(".jian").click(function() {
					if(parseInt($(".num").val()) <= 0) {
						$(".num").val(0)
						zdalert("消息", "不得小于0"); //弹出框("不得小于0")
					} else {
						$(".num").val(parseInt($(".num").val()) - 1);
					}
				})

				$(".to_cart").click(function() {
					zdalert("消息", "已加入购物车"); //弹出框
				})
				$(".to_shouchang").click(function() {
					zdalert("消息", "已加入收藏"); //弹出框
				})
			</script>
		</div>
		<!--详情-->
		<div id="pro_detail" class="main">
			<div class="span9 Tab">
				<ul class="ul">
					<li class="active">详情</li>
					<li>评价 （<span>333</span>）</li>
				</ul>
				<ul class="con">
					<li class="on">产品很好</li>
					<li class="pingjia">
						<!--评价内容-->
						<ul class="pingjia_con">
							<li>
								<p class="top">
									<img src="images/pro01.jpg" class="touxiang">
									<span class="name">匿名用户</span>
									<span class="time">2017-10-10 08:09:50</span>
								</p>
								<p class="fen">评分：好评</p>
								<div class="detail">
									<p>不错，味道很好，就是小时候的味道</p>
									<img src="images/pro01.jpg" />
								</div>
								<div class="huifu">
									<p>商家：谢谢您的关顾</p>
								</div>
							</li>
							<li>
								<p class="top">
									<img src="images/pro01.jpg" class="touxiang">
									<span class="name">匿名用户</span>
									<span class="time">2017-10-10 08:09:50</span>
								</p>
								<p class="fen">评分：好评</p>
								<div class="detail">
									<p>不错，味道很好，就是小时候的味道</p>
									<img src="images/pro01.jpg" />
								</div>
								<div class="huifu">
									<p>商家：谢谢您的关顾</p>
								</div>
							</li>
						</ul>
					</li>
				</ul>
			</div>
			<div class="span3 relative">
				<p class="title">相关产品</p>
				<ul>
					<a href="pro_detail.html">
						<li>
							<div>
								<p class="name">碧螺春</p>
								<img src="images/pro01.jpg" />
								<p class="price">￥220</p>
							</div>
						</li>
					</a>
					<a href="pro_detail.html">
						<li>
							<div>
								<p class="name">碧螺春</p>
								<img src="images/pro01.jpg" />
								<p class="price">￥220</p>
							</div>
						</li>
					</a>
					<a href="pro_detail.html">
						<li>
							<div>
								<p class="name">碧螺春</p>
								<img src="images/pro01.jpg" />
								<p class="price">￥220</p>
							</div>
						</li>
					</a>
				</ul>
			</div>
		</div>
		<script>
			$(".Tab .ul li").click(function() {
				var index = $(".Tab .ul li").index($(this));
				$(".Tab .ul li").removeClass("active").eq(index).addClass("active");
				$(".Tab .con li").removeClass("on").eq(index).addClass("on");
			})
		</script>

		<script>
			$(".prolist .cate a").mouseover(function() {
				var index = $(".prolist .cate a").index($(this));
				$(".prolist .cate a").removeClass("current").eq(index).addClass("current");
			})
		</script>

		<div class="footer">
			<p><span>西雅衣家(中国)商业有限公司</span> 客服电话 <span>400 018 0960</span></p>
		</div>
		<!--回到顶部-->
		<a href="javascript:;" class="toTop"><img src="images/toTop.png"></a>
		
		<!--手机底部-->
		<!--占位，防止被底部遮住-->
		<div class="height1"></div>
		<div class="app_footer">
			<ul>
				<li>
					<a href="javascript:;" onclick="window.history.go(-1)">
						<div class="footer-div">
							<p><img src="images/ico_back.png"></p>
							<p>返回上一级</p>
						</div>
					</a>
				</li>
				<li>
					<a href="index.html">
						<div class="footer-div">
							<p><img src="images/ico_home.png"></p>
							<p>首页</p>
						</div>
					</a>
				</li>
				<li>
					<a href="index.html">
						<div class="footer-div">
							<p><img src="images/ico_zichanbao.png"></p>
							<p>资产包</p>
						</div>
					</a>
				</li>
				<li>
					<a href="user.html">
						<div class="footer-div">
							<p><img src="images/ico_per.png"></p>
							<p>个人中心</p>
						</div>
					</a>
				</li>
				
			</ul>
		</div>


		<script>
			$(".app_footer li").eq(1).addClass("active");
			$(".app_footer li.active img").attr("src", "images/ico_homeFoot.png")
		</script>
	</body>

</html>